<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
        <el-breadcrumb-item>随心选配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">随心选配置</div>
      <div class="entirety">
        <div class="search">
          <!--  账号状态搜索信息 -->
          <div class="demo-input-suffix">
            适用端
            <el-select clearable v-model="StateData" placeholder="请选择">
              <el-option
                v-for="item in business"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </div>
          <div style="margin-left: 250px;">
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="isDialog()"
              >新增小程序</el-button
            >
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="isDialogs()"
              >新增APP</el-button
            >
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="demand"
              >查询</el-button
            >
            <el-button type="warning" size="medium" @click="empty"
              >清空</el-button
            >
          </div>
        </div>
      </div>
      <!--  员工列表栏位-->
      <div class="entirety">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="sort" label="序号" width="120">
            <template slot-scope="scope">
              <div>
                <el-input
                  maxlength="4"
                  show-word-limit
                  v-model="scope.row.sort"
                  placeholder="请输入数字"
                  @blur="isBlur(scope.row)"
                  onkeyup="value=value.replace(/[^\d]/g,'')"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="商品名称">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialStatus" label="商品状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialStatus == 1 ? "上架" : "下架" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="platformType" label="适用端">
            <template slot-scope="scope">
              <div>
                {{ scope.row.platformType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                style="color: #fc9e76;"
                type="text"
                @click="isdel(scope.row.id)"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 新增小程序dialog -->
      <el-dialog
        title="新增小程序"
        :visible.sync="dialogFormVisible"
        width="40%"
        @closed="closedialog"
      >
        <el-form :model="form" ref="form" label-width="90px" :rules="rules">
          <el-form-item
            label="选择商品:"
            :label-width="formLabelWidth"
            prop="goodsInfoCode"
          >
            <el-select
              v-model="form.goodsInfoCode"
              placeholder="请选择"
              style="width: 50%;margin-bottom: 10px;margin-left:10px;"
            >
              <el-option
                v-for="item in GoodsInfoList"
                :key="item.goodsCode"
                :label="item.goodsTitle"
                :value="item.goodsCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="适用端:"
            :label-width="formLabelWidth"
            prop="platformTypeCode"
          >
            <span style="margin-left: 10px;">小程序</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="isSubmit('form')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 新增APPdialog -->
      <el-dialog
        title="新增APP"
        :visible.sync="dialogFormVisibles"
        width="40%"
        @closed="closedialog"
      >
        <el-form :model="forms" ref="forms" label-width="90px" :rules="rulers">
          <el-form-item
            label="选择商品:"
            :label-width="formLabelWidth"
            prop="goodsInfoCodes"
          >
            <el-select
              v-model="forms.goodsInfoCodes"
              placeholder="请选择"
              style="width: 50%;margin-bottom: 10px;margin-left:10px;"
            >
              <el-option
                v-for="item in GoodsInfoList"
                :key="item.goodsCode"
                :label="item.goodsTitle"
                :value="item.goodsCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="适用端:"
            :label-width="formLabelWidth"
            prop="platformTypeCode"
          >
            <span style="margin-left: 10px;">APP</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="isSubmits('forms')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      dialogFormVisible: false,
      dialogFormVisibles: false,
      tableData: [],
      form: {
        goodsInfoCode: "",
        platformTypeCode: "INDEX_MINIAPP"
      },
      forms: {
        goodsInfoCodes: "",
        platformTypeCode: "INDEX_APP"
      },
      userSearch: 0,
      GoodsInfoList: [],
      formLabelWidth: "120px",
      num: "",
      StateData: "",
      business: [],
      multipleSelection: [],
      rules: {
        goodsInfoCode: [
          { required: true, message: "请选择商品", trigger: "change" }
        ],
        platformTypeCode: [
          { required: true, message: "请选择适用端", trigger: "change" }
        ]
      },
      rulers: {
        goodsInfoCodes: [
          { required: true, message: "请选择商品", trigger: "change" }
        ],
        platformTypeCode: [
          { required: true, message: "请选择适用端", trigger: "change" }
        ]
      }
    };
  },
  activated() {
    this.DetailByPage();
    this.selectPltfmTypeList();
  },
  methods: {
    //列表
    DetailByPage() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          bannerFlag: "1",
          positionType: "97",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        // console.log(res.data.cmsInsertGoodsConfigResponse);
        const a = res.data.cmsInsertGoodsConfigResponse.list;
        this.tableData = a;
        this.total = res.data.cmsInsertGoodsConfigResponse.total;
      });
    },
    //miniapp
    isDialog() {
      this.dialogFormVisible = true;
      this.selectminiapp();
    },
    //android
    isDialogs() {
      this.dialogFormVisibles = true;
      this.selectandroid();
    },
    //弹框关闭
    closedialog() {
      this.form.goodsInfoCode = "";
      this.forms.goodsInfoCodes = "";
    },
    //根据id删除随心选配置
    isdel(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: `/cmsadmin/homeService/config/index/V2/deleteMaterial`,
            method: "get",
            params: {
              materialId: id
            }
          })
            .then(res => {
              if (res.success == 1) {
                this.$message.success("删除成功");
                this.DetailByPage();
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //序号
    isBlur(e) {
      console.log(e);
      if (e.sort === "" || e.sort < 0) {
        this.$message({
          message: "序号不能为空且大于0",
          type: "warning"
        });
        this.DetailByPage();
      } else {
        this.$http({
          url: "/cmsadmin/homeService/config/index/V2/updateMaterialSort",
          method: "post",
          data: {
            sort: e.sort,
            id: e.id
          }
        }).then(res => {
          if (res.success == 1) {
            this.$message.success("修改成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
            this.DetailByPage();
          }
        });
      }
    },
    //新增小程序
    isSubmit(forms) {
      this.$refs[forms].validate(valid => {
        if (valid) {
          this.$http({
            url: `/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial`,
            method: "post",
            data: {
              cmsInsertGoodsConfigRequest: {
                goodsInfoCode: this.form.goodsInfoCode,
                platformTypeCode: this.form.platformTypeCode,
                positionId: this.$route.query.positionId
              },
              positionType: "97"
            }
          })
            .then(res => {
              console.log(res, "添加");
              if (res.success == 1) {
                this.$message.success("添加成功");
                this.DetailByPage();
              }
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        } else {
          return false;
        }
      });
    },
    //新增APP
    isSubmits(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$http({
            url: `/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial`,
            method: "post",
            data: {
              cmsInsertGoodsConfigRequest: {
                goodsInfoCode: this.forms.goodsInfoCodes,
                platformTypeCode: this.forms.platformTypeCode,
                positionId: this.$route.query.positionId
              },
              positionType: "97"
            }
          })
            .then(res => {
              console.log(res, "添加");
              if (res.success == 1) {
                this.$message.success("添加成功");
                this.DetailByPage();
              }
              this.dialogFormVisibles = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        } else {
          return false;
        }
      });
    },
    //查询商品列表miniapp
    selectminiapp() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/selectGoodsInfoList`,
        method: "GET",
        headers: {
          "platform-type": "miniapp"
        },
        params: {
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        let filterList = res.filter(item => {
          return item.isAdd != 1;
        });
        this.GoodsInfoList = filterList;
        // console.log(filterList, 'miniapp')
      });
    },
    //查询商品列表android
    selectandroid() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/selectGoodsInfoList`,
        method: "GET",
        headers: {
          "platform-type": "android"
        },
        params: {
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        let filterList = res.filter(item => {
          return item.isAdd != 1;
        });
        this.GoodsInfoList = filterList;
        // console.log(filterList, 'android')
      });
    },
    //查询所有适用端
    selectPltfmTypeList() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/selectPltfmTypeList`,
        method: "GET"
      }).then(res => {
        // console.log('查询所有适用端', res.data)
        this.business = res.data;
      });
    },
    //查询
    demand() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.platformTypeCode": this.StateData,
          bannerFlag: "1",
          positionType: "97",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        const a = res.data.cmsInsertGoodsConfigResponse.list;
        this.tableData = a;
        this.total = res.data.cmsInsertGoodsConfigResponse.total;
        this.$message.success("查询成功");
      });
    },
    //清空
    empty() {
      this.StateData = "";
      this.DetailByPage();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.demand();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.demand();
    }
  }
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 95%;
  margin: 10px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
}
.demo-input-suffix {
  margin-left: 1%;
  display: flex;
  align-items: center;
}
/deep/ .search {
  padding: 10px;
  margin-bottom: 0px;
  justify-content: space-between;
}
/deep/ .el-select {
  margin-left: 10px;
}
/deep/ .el-pagination {
  padding: 10px;
}
/deep/ .el-dialog__body {
  padding-bottom: 0px;
}
</style>
